<template>
  <div>
  <van-cell-group class="my-info" v-if="user">
  <van-cell  :border='false' class="base-info" title="单元格" value="内容" center>
    <van-image
    slot="icon"
    round
    width="80"
    height="80"
    fit="cover"
    src="https://img01.yzcdn.cn/vant/cat.jpeg"
  />
  <div slot="title">潘成成傻逼</div>
  <van-button
  size="small"
  round
  >编辑资料</van-button>
  </van-cell>

  <van-grid :border='false'>
  <van-grid-item  text="头条" >
    <span slot="icon">123</span>
  </van-grid-item>
  <van-grid-item  text="关注" >
    <span slot="icon">123</span>
  </van-grid-item>
  <van-grid-item  text="粉丝" >
    <span slot="icon">123</span>
  </van-grid-item>
  <van-grid-item  text="获赞" >
    <span slot="icon">123</span>
  </van-grid-item>
</van-grid>
</van-cell-group>
 <div v-else class="noon" >
   <div class="onbutton" @click="$router.push('/login') ">未登录</div>
 </div>

<van-grid :column-num="2">
  <van-grid-item icon="star-o" text="收藏" />
  <van-grid-item icon="browsing-history-o" text="历史" />
</van-grid>

<van-cell title="消息通知" is-link url="http://localhost:8080/#/login" />
<van-cell title="小智同学" is-link to="/" />
<van-cell v-if="user" title="退出登录" @click="onlogout" style="text-align:center" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getcurrentUser } from '@/api/user.js'

export default {
  name: 'MyIndex',
  comments: {},
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    // this.loadcurrentuser()
  },
  methods: {
    async loadcurrentuser () {
      const { data } = await getcurrentUser()
      console.log(data)
    },
    onlogout () {
      this.$dialog.confirm({
        title: '退出登录',
        message: '确认退出吗？'
      })
        .then(() => {
          this.$store.commit('setuser', null)
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="less">
.my-info{
  background-color: rgb(119, 189, 247) ;
  .base-info{
    background-color: unset;
  }
  /deep/ .van-grid-item__content{
    background-color: unset;
  }
}
.noon{
  width: 375px;
  height: 200px;
  background-color: rgb(82, 194, 247);
}
.onbutton{
  text-align: center;
  line-height: 200px;
}
</style>
